<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列关系测试</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        .test-result { margin: 10px 0; padding: 10px; border-radius: 5px; }
        .success { background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
        .error { background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
        .info { background-color: #d1ecf1; color: #0c5460; border: 1px solid #bee5eb; }
    </style>
</head>
<body>
    <h1>列关系连接点测试</h1>
    <button onclick="runColumnTest()">运行列关系测试</button>
    <div id="testResults"></div>

    <script>
        function runColumnTest() {
            const results = document.getElementById('testResults');
            results.innerHTML = '';
            
            // 模拟真实的表数据结构
            const mockTables = [
                {
                    name: 'categories',
                    columns: [
                        {name: 'id', data_type: 'INTEGER', is_primary_key: true, is_foreign_key: false},
                        {name: 'name', data_type: 'VARCHAR(100)', is_primary_key: false, is_foreign_key: false},
                        {name: 'description', data_type: 'TEXT', is_primary_key: false, is_foreign_key: false}
                    ],
                    x: 100,
                    y: 100,
                    height: 120
                },
                {
                    name: 'products', 
                    columns: [
                        {name: 'id', data_type: 'INTEGER', is_primary_key: true, is_foreign_key: false},
                        {name: 'name', data_type: 'VARCHAR(100)', is_primary_key: false, is_foreign_key: false},
                        {name: 'category_id', data_type: 'INTEGER', is_primary_key: false, is_foreign_key: true},
                        {name: 'price', data_type: 'DECIMAL(10,2)', is_primary_key: false, is_foreign_key: false}
                    ],
                    x: 400,
                    y: 100,
                    height: 140
                }
            ];
            
            const mockRelationships = [
                {
                    from_table: 'products',
                    from_column: 'category_id',
                    to_table: 'categories',
                    to_column: 'id'
                }
            ];
            
            addResult('开始测试列关系连接点计算...', 'info');
            
            try {
                // 模拟calculateOptimalConnection函数
                function calculateOptimalConnection(fromTable, toTable, nodeWidth, relationship) {
                    const fromCenterX = fromTable.x + nodeWidth / 2;
                    const fromCenterY = fromTable.y + fromTable.height / 2;
                    const toCenterX = toTable.x + nodeWidth / 2;
                    const toCenterY = toTable.y + toTable.height / 2;
                    
                    const angle = Math.atan2(toCenterY - fromCenterY, toCenterX - fromCenterX);
                    
                    let x1, y1;
                    if (Math.abs(Math.cos(angle)) > Math.abs(Math.sin(angle))) {
                        if (Math.cos(angle) > 0) {
                            x1 = fromTable.x + nodeWidth;
                        } else {
                            x1 = fromTable.x;
                        }
                        y1 = fromCenterY;
                    } else {
                        x1 = fromCenterX;
                        if (Math.sin(angle) > 0) {
                            y1 = fromTable.y + fromTable.height;
                        } else {
                            y1 = fromTable.y;
                        }
                    }
                    
                    let x2, y2;
                    const dx = toCenterX - fromCenterX;
                    const dy = toCenterY - fromCenterY;
                    
                    if (dx > nodeWidth) {
                        x2 = toTable.x;
                    } else if (dx < -nodeWidth) {
                        x2 = toTable.x + nodeWidth;
                    } else if (dy > nodeWidth) {
                        x2 = toCenterX;
                        y2 = toTable.y;
                    } else if (dy < -nodeWidth) {
                        x2 = toCenterX;
                        y2 = toTable.y + toTable.height;
                    } else {
                        x2 = toTable.x;
                    }
                    
                    if (x2 && y2 === undefined) {
                        y2 = toCenterY;
                    }
                    
                    // 根据关联列调整Y坐标
                    if (relationship) {
                        const fromColumnIndex = fromTable.columns.findIndex(col => col.name === relationship.from_column);
                        const toColumnIndex = toTable.columns.findIndex(col => col.name === relationship.to_column);
                        
                        addResult(`找到关联列: ${relationship.from_column} (索引: ${fromColumnIndex}) -> ${relationship.to_column} (索引: ${toColumnIndex})`, 'info');
                        
                        if (fromColumnIndex >= 0) {
                            y1 = fromTable.y + 55 + fromColumnIndex * 22 + 11;
                        }
                        if (toColumnIndex >= 0) {
                            y2 = toTable.y + 55 + toColumnIndex * 22 + 11;
                        }
                    }
                    
                    return { x1, y1, x2, y2 };
                }
                
                // 测试关系
                const rel = mockRelationships[0];
                const fromTable = mockTables.find(t => t.name === rel.from_table);
                const toTable = mockTables.find(t => t.name === rel.to_table);
                
                if (!fromTable || !toTable) {
                    addResult('错误: 找不到关联表', 'error');
                    return;
                }
                
                addResult(`测试关系: ${rel.from_table}.${rel.from_column} -> ${rel.to_table}.${rel.to_column}`, 'info');
                
                // 计算连接点
                const connection = calculateOptimalConnection(fromTable, toTable, 200, rel);
                
                addResult(`连接点计算成功:`, 'success');
                addResult(`起点: (${connection.x1}, ${connection.y1})`, 'info');
                addResult(`终点: (${connection.x2}, ${connection.y2})`, 'info');
                
                // 验证列位置
                const fromColIndex = fromTable.columns.findIndex(col => col.name === rel.from_column);
                const toColIndex = toTable.columns.findIndex(col => col.name === rel.to_column);
                
                const expectedY1 = fromTable.y + 55 + fromColIndex * 22 + 11;
                const expectedY2 = toTable.y + 55 + toColIndex * 22 + 11;
                
                addResult(`预期Y1: ${expectedY1} (列索引: ${fromColIndex})`, 'info');
                addResult(`预期Y2: ${expectedY2} (列索引: ${toColIndex})`, 'info');
                
                if (Math.abs(connection.y1 - expectedY1) < 1 && Math.abs(connection.y2 - expectedY2) < 1) {
                    addResult('✅ 列位置计算正确！关系线将连接到关联列', 'success');
                } else {
                    addResult('❌ 列位置计算有误', 'error');
                }
                
            } catch (error) {
                addResult(`测试失败: ${error.message}`, 'error');
                console.error('测试错误:', error);
            }
        }
        
        function addResult(message, type) {
            const results = document.getElementById('testResults');
            const div = document.createElement('div');
            div.className = `test-result ${type}`;
            div.textContent = message;
            results.appendChild(div);
        }
        
        // 页面加载时自动运行
        window.onload = function() {
            console.log('列关系测试页面加载完成');
        };
    </script>
</body>
</html>